<style lang="scss" scoped>
    .swiper-layer{
        position: relative;
        width: 100%;
        height: 100%;
        background: #000000;
        color: #ffffff;
        padding:35px 27px 50px 27px;
        box-sizing: border-box;
        .title-wrap{
            font-size: 12px;
            margin-bottom: 12px;
            .swiper-process{
                float: right;
                margin-right: 17px;
                font-size: 12px;
                width: inherit;
                margin-top: 5px;
            }
        }
        .label-wrap {
            display: flex;
            flex-wrap: wrap;
            padding: 18px 0 0 11px;
            margin-bottom: 34px;
            .label-item {
                padding: 7px 14px;
                margin-right: 15px;
                border: 1px solid #ffffff;
            }
        }
        
        .gallery-top {
            width: 100%;
            img{
                width: 100%;
            }
        }
        .gallery-thumbs {
            box-sizing: border-box;
            padding: 6px 0;
        }
        .gallery-thumbs .swiper-slide {
            width: 25%;
            opacity: 0.6;
            img{
                width: 100%;
                filter: grayscale(100%);
            }
        }
        .gallery-thumbs .swiper-slide-active {
            opacity: 1;
            img{
                width: 100%;
                filter: grayscale(0%);
            }
        }
        .swiper-next{
            position: absolute;
            width: 28px;
            height: 30px;
            right:0;
            bottom: 50%;
            transform: translate(0,-50%);
            background: url("/static/white-arrow-r.png") 50% 50% no-repeat;
        }
        .swiper-prev{
            position: absolute;
            width: 28px;
            height: 30px;
            left:0;
            bottom: 50%;
            transform: translate(0,-50%);
            background: url("/static/white-arrow-left.png") 50% 50% no-repeat;
        }
        .swiper-button-disabled{
            opacity: 0.5;
        }
    }
    .item-info{
        padding: 35px 0 25px 25px;
    }
    .infos{
        margin-top: 18px;
        display: flex;
        .info{
            margin-right: 56px;
            &:last-child{
                padding: 0;
                margin-right: 0;
            }
        }
    
        .info-title{
            font-size: 12px;
            line-height: 16px;
            color: $gray;
        }
        .info-content{
            line-height: 16px;
            font-size: 12px;
            margin-bottom: 5px;
        }
    }
    .layout-list-wrap{
        background: #F6F6F6;
        padding-left: 28px;
        padding-bottom: 35px;
        overflow: hidden;
        .title{
            font-size: 12px;
            margin: 32px 0 5px 0;
        }
        .layout-list{
            display: flex;
            flex-wrap: wrap;
            .layout-item{
                width: 98px;
                height: 110px;
                margin-right: 11px;
                background: $white;
                margin-top: 10px;
                text-align: center;
                .num{
                    font-size: 14px;
                    margin-top: 15px;
                }
                .desc{
                    font-size: 12px;
                    color: $fontColor;
                }
                .icon{
                    width:100%;
                    height: 50px;
                }
                .layout-1{
                    background: url("/static/layout-1.png") 50% 50% no-repeat;
                }
                .layout-2{
                    background: url("/static/layout-2.png") 50% 50% no-repeat;
                }
                .layout-3{
                    background: url("/static/layout-3.png") 50% 50% no-repeat;
                }
                .layout-4{
                    background: url("/static/layout-4.png") 50% 50% no-repeat;
                }
                .layout-5{
                    background: url("/static/layout-5.png") 50% 50% no-repeat;
                }
                .layout-6{
                    background: url("/static/layout-6.png") 50% 50% no-repeat;
                }
            }
        }
    }
    

</style>

<template>
    <div class="place-details-wrap">
        <div class="item-info">
            <div class="title">
                <span class="name">
                    {{ info.name }}
                </span>
                <span class="pillar">{{ info.pillar }}</span>
            </div>
            <div class="infos">
                <div class="info">
                    <p class="info-content">{{ info.area }} ㎡</p>
                    <p class="info-title">面积</p>
                </div>
                <div class="info">
                    <p class="info-content">{{ info.height }}</p>
                    <p class="info-title">层高</p>
                </div>
                <div class="info">
                    <p class="info-content">{{ info.num }}</p>
                    <p class="info-title">最大容纳</p>
                </div>
            </div>
        </div>
        <div class="layout-list-wrap">
            <p class="title">布局与容纳人数</p>
            <div class="layout-list">
                <div class="layout-item" v-for="(item,i) in layouts" :key="i">
                    <p class="num">{{ item.num }}人</p>
                    <div class="icon" :class="'layout-'+(i+1)"></div>
                    <p class="desc">{{ item.desc }}</p>
                </div>
            </div>
        </div>
        <!--图片详情层-->
        <div class="swiper-layer">
            <div class="title-wrap">
                场地照片
                <div class="swiper-process"></div>
            </div>
            <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
                <swiper-slide class="slide" v-for="(item,i) in slideArray" :key="i">
                    <img :src="item">
                </swiper-slide>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
                <swiper-slide class="slide" v-for="(item,i) in slideArray" :key="i">
                    <img :src="item">
                </swiper-slide>
            </swiper>
            <div class="swiper-next" slot="button-next"></div>
            <div class="swiper-prev" slot="button-prev"></div>
        </div>
    
    </div>
</template>

<script>
    import FooterComponent from '@/views/footer'
    export default {
        components: {
            FooterComponent
        },
        computed: {
        
        },
        
        filters: {},
        data() {
            return {
            	info:  {
                    imgUrl: '/static/img2.png',
                    name: '上海总会厅',
                    pillar: '无柱',
                    area: 420,
                    height: 5.1,
                    num: 550
                },
                layouts: [
                    {
                    	num: 550,
                        type: 1,
                        desc: '剧院式布局'
                    },
                    {
                        num: 420,
                        type: 2,
                        desc: '课桌式布局'
                    },
                    {
                        num: 320,
                        type: 3,
                        desc: '宴会式布局'
                    },
                    {
                        num: 550,
                        type: 4,
                        desc: 'U型式布局'
                    },
                    {
                        num: 420,
                        type: 5,
                        desc: 'H型式布局'
                    },
                    {
                        num: 320,
                        type: 6,
                        desc: '董事会式布局'
                    }
                ],
                slideArray: [
                    '/static/slide.png','/static/slide.png','/static/slide.png',
                    '/static/slide.png','/static/slide.png','/static/slide.png',
                ],
                swiperOptionTop: {
                    spaceBetween: 0,
                    pagination: {
                        el: '.swiper-process',
                        type: 'fraction'
                    },
                    navigation: {
                        nextEl: '.swiper-next',
                        prevEl: '.swiper-prev'
                    }
                },
                swiperOptionThumbs: {
                    spaceBetween: 10,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    touchRatio: 0.2,
                    slideToClickedSlide: true,
                }
            };
        },
        mounted() {
            this.$nextTick(() => {
                const swiperTop = this.$refs.swiperTop.swiper
                const swiperThumbs = this.$refs.swiperThumbs.swiper
                swiperTop.controller.control = swiperThumbs
                swiperThumbs.controller.control = swiperTop
            })
        },
        methods: {
        
        }
    };
</script>

